<template>
    <div class="content-wrap" id="wrap">
        <div class="mask-layer">{{currentTime}}</div>
        <el-image style="width: 100%; height: 100%" :src="src" fit="fill" usemap="#Map" id="qw"></el-image>
    </div>
</template>
<script>
const moment = require("moment");
export default {
    name: 'AirConditionerMonitor',
    data() {
        return {
            currentTime : '',
            src: require('../../../../public/img/AirConditionerMonitor.jpg')
        };
    },
    created() {},
    mounted() {
        this.updateTime();
    },
    methods: {
        updateTime : function (){
            let _that = this;
            setInterval(function(){
                _that.currentTime = moment().format("YYYY年MM月DD日 HH:mm:ss");
            } , 1000);
        }
    }
};

</script>
<style lang="scss" scoped>
.content-wrap {
    margin: 50px;
    width: 1722px;
    height: 795px;
    position: absolute;
}
.mask-layer{
    font-family: "微軟正黑體 Light";
    color: #FFFFFF;
    background-color: #363543;
    width: 280px;
    min-height: 50px;
    line-height: 36px;
    position: absolute;
    z-index: 10;
    right: 250px;
    top: 20px;
    letter-spacing: 3px;
    padding-top: 18px;
    text-align: right;
}
</style>
